<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>联系我们</title>
		<link rel="stylesheet" type="text/css" href="css/contact.css"/>
		<script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=AmGvWeveEBkDaLWBG0hsMARvnzPPNj2d"></script>
	</head>
	<body>
		<header>
			<div class="top">
				<a href="index.html"><img src="img/logo_03.jpg"/></a>
				<ul>
					<li>
						<a href="index.html">首页</a>
					</li>
					<li>
						<a href="about.html">公司介绍</a>
					</li>
					<li>
						<a href="news.html">新闻中心</a>
					</li>
					<li>
						<a href="product.html">产品中心</a>
					</li>
					<li>
						<a class="current" href="contact.html">联系我们</a>
					</li>
					</li>
				</ul>
			</div>
			<img class="picture" src="img/7_contact_us_02.jpg"/>
		</header>
		<div class="middle">
			<div class="location">
				<h1>联系我们</h1>
				<p></p>
				<h2>Contact us</h2>
			</div>
			
			<div id="map"></div>
			<div class="form-msg">
				<form action="">
					<div class="name">
						<label>*姓名：</label>
				        <input type="text" />
					</div>
					
				    <div class="tell">
				    	<label>*联系方式：</label>
				    	<input type="text" />
				    </div>
				    
				    
				    <div class="mail">
				    	<label>*邮箱：</label>
				    	<input type="email" />
				    </div>
				    <div class="message">
				    	<label>*留言：</label>
				    	<textarea name="" rows="9" cols="158"></textarea>
				    </div>
				    <div class="code" >
				    	<label>*验证码：</label>
				    	<input type="text" />
				    </div>
				    <div class="codepicture" id="checkCode" onclick="createCode()" ><img src="img/7_contact_us_03.jpg"/></div>
				    <a href="#">看不清，换一张</a>	
				    	
				    	
				    	
				    	
				    
				    <div class="button">
				    <input type="submit" name="" id="" value="提交" />
				    <input type="reset" name="" id="" value="重置" />
				    </div>
				</form>
			</div>
			
				
				
				
				
			
			
		<div class="footer">
			<div class="title">
				<h1>联系我们</h1>
				<h2>CONTACT</h2>
				<p></p>
			</div>
			<div class="icon">
				<div class="icon-left">
					<img src="img/1_index.jpg"/>
					<p>公司地址：北京市通州区瑞都国际中心</p>
					<ul>
						<li>
							<a href="###"><img src="img/6_index.jpg"/></a>
						</li>
						<li>
							<a href="###"><img src="img/5_index.jpg"/></a>
						</li>
						<li>
							<a href="###"><img src="img/4_index.jpg"/></a>
						</li>
					</ul>
				</div>
				<div class="icon-center">
					<ul>
						<li>
							<img src="img/2_index.jpg"/>
					        <p>电子邮箱：744253022@QQ.com</p>
						</li>
						<li>
							<img src="img/3_index.jpg"/>
					        <h6>微信扫一扫，打开有惊喜</h6>
						</li>
					</ul>
					
					
				</div>
				<div class="icon-right">
					<ul>
						<li>
							<img src="img/7_index.jpg"/>
							<p>服务热线：010-60524383</p>
						</li>
						<li>
							<img src="img/8_index_03.jpg"/>
							<p>服务时间：9:00-19:00</p>
						</li>
					</ul>
				</div>
			</div>
			<div class="copyright">
				<p>Copyright © 2017 imooc.com All Rights Reserved | 京ICP备 13046642号-2</p>
			</div>
		</div>
	</body>
	<script type="text/javascript">
    //创建和初始化地图函数：
    function initMap(){
      createMap();//创建地图
      setMapEvent();//设置地图事件
      addMapControl();//向地图添加控件
      addMapOverlay();//向地图添加覆盖物
    }
    function createMap(){ 
      map = new BMap.Map("map"); 
      map.centerAndZoom(new BMap.Point(116.663379,39.894923),18);
    }
    function setMapEvent(){
      map.enableScrollWheelZoom();
      map.enableKeyboard();
      map.enableDragging();
      map.enableDoubleClickZoom()
    }
    function addClickHandler(target,window){
      target.addEventListener("click",function(){
        target.openInfoWindow(window);
      });
    }
    function addMapOverlay(){
      var markers = [
        {content:"地址：北京市通州区瑞都国际中心",title:"信诺国际展览有限公司",imageOffset: {width:0,height:-21},position:{lat:39.895144,lng:116.662516}}
      ];
      for(var index = 0; index < markers.length; index++ ){
        var point = new BMap.Point(markers[index].position.lng,markers[index].position.lat);
        var marker = new BMap.Marker(point,{icon:new BMap.Icon("http://api.map.baidu.com/lbsapi/createmap/images/icon.png",new BMap.Size(20,25),{
          imageOffset: new BMap.Size(markers[index].imageOffset.width,markers[index].imageOffset.height)
        })});
        var label = new BMap.Label(markers[index].title,{offset: new BMap.Size(25,5)});
        var opts = {
          width: 200,
          title: markers[index].title,
          enableMessage: false
        };
        var infoWindow = new BMap.InfoWindow(markers[index].content,opts);
        marker.setLabel(label);
        addClickHandler(marker,infoWindow);
        map.addOverlay(marker);
      };
      var labels = [
      ];
      for(var index = 0; index < labels.length; index++){
        var opt = { position: new BMap.Point(labels[index].position.lng,labels[index].position.lat )};
        var label = new BMap.Label(labels[index].content,opt);
        map.addOverlay(label);
      };
      var plOpts = [
      ];
      var plPath = [
      ];
      for(var index = 0; index < plOpts.length; index++){
        var polyline = new BMap.Polyline(plPath[index],plOpts[index]);
        map.addOverlay(polyline);
      }
    }
    //向地图添加控件
    function addMapControl(){
      var scaleControl = new BMap.ScaleControl({anchor:BMAP_ANCHOR_BOTTOM_LEFT});
      scaleControl.setUnit(BMAP_UNIT_IMPERIAL);
      map.addControl(scaleControl);
      var navControl = new BMap.NavigationControl({anchor:BMAP_ANCHOR_TOP_LEFT,type:0});
      map.addControl(navControl);
    }
    var map;
      initMap();
  </script>
</html>
